The Contours Series Type
Contour maps or Contour-plots can be created using the UniformContoursRenderableSeries type.
The JavaScript Contours Chart Example can be found in the SciChart.Js Examples Suite on Github, or our live demo at demo.scichart.com
Above: The JavaScript Contours Chart example from the SciChart.js Demo.
Create a Contours Plot
SciChart's Contour series is an extremely fast, lightweight chart types for rendering two dimensional data as a contour plot. The UniformContoursRenderableSeries type should be used in conjunction with a UniformHeatmapDataSeries when you simply want to specify a Step in the X,Y direction (each cell is the same size).
To create a Javascript Contours Chart with SciChart.js, use the following code:
In the code above:
- We create an empty 2D array (number[][]) using the helper function zeroArray2D. This is filled with values in the generateData function
- A UniformHeatmapDataSeries instance is created with xStart, xStep, yStart, yStep values = 0, 1, 0, 1. This means the heatmap starts at X,Y = 0,0 and each cell is 1 on the axis.
- We set the contour Stroke and StrokeThickness.
- A UniformContoursRenderableSeries instance is created and added to the sciChartSurface.renderableSeries collection.
This results in the following output:
<div id="scichart-root" ></div>
body { margin: 0; }
#scichart-root { width: 100%; height: 100vh; }
// This function generates data for the heatmap series example
function generateExampleData(index, heatmapWidth, heatmapHeight, colorPaletteMax) {
const { zeroArray2D } = SciChart;
// or, import { zeroArray2D } from "SciChart";
const zValues = zeroArray2D([heatmapHeight, heatmapWidth]);
const angle = (Math.PI * 2 * index) / 30;
let smallValue = 0;
for (let x = 0; x < heatmapWidth; x++) {
for (let y = 0; y < heatmapHeight; y++) {
const v =
(1 + Math.sin(x * 0.04 + angle)) * 50 +
(1 + Math.sin(y * 0.1 + angle)) * 50 * (1 + Math.sin(angle * 2));
const cx = heatmapWidth / 2;
const cy = heatmapHeight / 2;
const r = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
const exp = Math.max(0, 1 - r * 0.008);
const zValue = v * exp;
zValues[y][x] = zValue > colorPaletteMax ? colorPaletteMax : zValue;
zValues[y][x] += smallValue;
}
smallValue += 0.001;
}
return zValues;
}
async function simpleContoursChart(divElementId) {
// #region ExampleA
// Demonstrates how to create a contour plot with SciChart.js
const {
SciChartSurface,
NumericAxis,
HeatmapColorMap,
UniformHeatmapDataSeries,
UniformHeatmapRenderableSeries,
UniformContoursRenderableSeries,
SciChartJsNavyTheme
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"
// Create a SciChartSurface with X & Y Axis
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
theme: new SciChartJsNavyTheme()
});
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const WIDTH = 300;
const HEIGHT = 200;
const colorPaletteMax = 200;
// Create a Heatmap Data-series. zValues are heatValues as a 2D Array (number[][])
// Open the Codepen below to see the definition of this function
const zValues = generateExampleData(3, WIDTH, HEIGHT, colorPaletteMax);
// Create the uniform heatmap data series. Pass heatValues as number[][]
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, {
// 2d zValues array. Dimensions [height][width]
zValues,
// xStart, xStep, yStart, yStep defines the x,y position
xStart: 0,
xStep: 1,
yStart: 0,
yStep: 1,
});
// Create a Contours RenderableSeries with the same data
const contourSeries = new UniformContoursRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries,
zMin: 20,
zMax: colorPaletteMax,
zStep: 20,
});
// Add it to the scichartsurface
sciChartSurface.renderableSeries.add(contourSeries);
// Create a background heatmap series with the same data and add to the chart
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries,
opacity: 0.5,
useLinearTextureFiltering: false,
// See heatmap documentation for description of how colormaps work
colorMap: new HeatmapColorMap({ minimum: 0, maximum: colorPaletteMax, gradientStops: [
{ offset: 1, color: "#EC0F6C" },
{ offset: 0.9, color: "#F48420" },
{ offset: 0.7, color: "#DC7969" },
{ offset: 0.5, color: "#67BDAF" },
{ offset: 0.3, color: "#50C7E0" },
{ offset: 0.2, color: "#264B93" },
{ offset: 0, color: "#14233C" }
]
}),
});
// Add to the SciChartSurface
sciChartSurface.renderableSeries.add(heatmapSeries);
// ...
// #endregion
// Add zooming, panning for the example
const { ZoomPanModifier, ZoomExtentsModifier, MouseWheelZoomModifier } = SciChart;
sciChartSurface.chartModifiers.add(new ZoomPanModifier(), new ZoomExtentsModifier(), new MouseWheelZoomModifier());
};
simpleContoursChart("scichart-root");
async function builderExample(divElementId) {
// #region ExampleB
// Demonstrates how to create a line chart with SciChart.js using the Builder API
const {
chartBuilder,
ESeriesType,
HeatmapColorMap,
EThemeProviderType
} = SciChart;
// or, for npm, import { chartBuilder, ... } from "scichart"
const WIDTH = 300;
const HEIGHT = 200;
const colorPaletteMax = 200;
// Create a Heatmap Data-series. zValues are heatValues as a 2D Array (number[][])
// Open the Codepen below to see the definition of this function
const zValues = generateExampleData(3, WIDTH, HEIGHT, colorPaletteMax);
const colorMap = new HeatmapColorMap({ minimum: 0, maximum: colorPaletteMax, gradientStops: [
{ offset: 1, color: "#EC0F6C" },
{ offset: 0.9, color: "#F48420" },
{ offset: 0.7, color: "#DC7969" },
{ offset: 0.5, color: "#67BDAF" },
{ offset: 0.3, color: "#50C7E0" },
{ offset: 0.2, color: "#264B93" },
{ offset: 0, color: "#14233C" }
]
});
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
series: [
{
type: ESeriesType.UniformContoursSeries,
options: {
zMin: 20,
zMax: colorPaletteMax,
zStep: 20
},
heatmapData: {
zValues,
xStart: 0,
xStep: 1,
yStart: 0,
yStep: 1
}
},
{
type: ESeriesType.UniformHeatmapSeries,
options: { colorMap, opacity: 0.5 },
heatmapData: {
zValues,
xStart: 0,
xStep: 1,
yStart: 0,
yStep: 1
}
}
]
});
// #endregion
};
// Uncomment this to use the builder example
//builderExample("scichart-root");
Updating Data in a Contour map
The contour map is supposed to be fully dynamic, enabling real-time graphics. The Contours Series however does not support append, insert, update, remove functions like other DataSeries do. You can however update the data and force a refresh simply by updating the data passed in. To do this, use the following code:
| Example Title |
Copy Code
|
|---|---|
import { UniformHeatmapDataSeries, zeroArray2D } from "scichart";
// Create an empty 2D array of size height & width
const initialZValues: number[][] = zeroArray2D([height, width]);
// Create a Heatmap Data-series. Pass the heatValues as a number[][] to the UniformHeatmapDataSeries
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, initialZValues);
// ...
// Later, update the data
initialZValues[5][6] = 123.4;
// Tell SciChart the data has changed
heatmapDataSeries.notifyDataChanged()
// You can also load an entirely new array with the function UniformHeatmapDataSeries.setZValues
const newZValues; // type number[][]
heatmapDataSeries.setZValues(newZValues);
|
|
For more details, including a live example of how to update 2D array data for heatmaps and contours, see the Uniform Heatmap documentation - Updating Heatmaps documentation page. The mechanism for contour plots is the same.
See Also